<script setup>
import { ref } from "vue";
import empty_img from "@/assets/images/empty_img.png";
import HomeApis from "@/apis/home.js";
import ListApis from "@/apis/list.js";
import VideoApis from "@/apis/video.js";
import MyResourceApis from "@/apis/myResource.js";
import { ArrowLeft, ArrowRight, Clock } from '@element-plus/icons-vue'
import useUserStore from "@/stores/user.js";
import ChapterVideo from "@/views/mine/components/ChapterVideo.vue";
import { formatToMouth } from '@/utils/format.js'
import NoteApis from '@/apis/note.js'


import a_svg from '@/assets/images/a.svg'
import b_svg from '@/assets/images/b.svg'
import c_svg from '@/assets/images/c.svg'
import d_svg from '@/assets/images/d.svg'
import e_svg from '@/assets/images/e.svg'
import f_png from '@/assets/images/f.png'
import mine_three1 from '@/assets/images/mine_three1.png'
import mine_three2 from '@/assets/images/mine_three2.png'
import mine_three3 from '@/assets/images/mine_three3.png'
import mine_three4 from '@/assets/images/mine_three4.png'
import mine_three5 from '@/assets/images/mine_three5.png'
import mine_three6 from '@/assets/images/mine_three6.png'
import mine_three7 from '@/assets/images/mine_three7.png'
import RightIcon from "@/components/common/RightIcon.vue";
import QuestionApis from '@/apis/question.js'
import { useRouter } from "vue-router";
import {ElMessage, ElMessageBox } from "element-plus";
import AnswerQuestion from "@/views/mine/components/bankComponents/AnswerQuestion.vue";
import EvaluationReport from "@/views/mine/components/bankComponents/EvaluationReport.vue";
import MyCollection from "@/views/mine/components/bankComponents/MyCollection.vue";
import QuestionRecord from "@/views/mine/components/bankComponents/QuestionRecord.vue";
import StudentsSpecial from "@/views/mine/components/bankComponents/StudentsSpecial.vue";
import Membership from "@/views/mine/components/bankComponents/Membership.vue";
import mine_three11 from '@/assets/images/mine_three11.png'
import mine_three21 from '@/assets/images/mine_three21.png'
import mine_three31 from '@/assets/images/mine_three31.png'
import CommonModeSelect from "@/components/common/CommonModeSelect.vue";
import PaperApis from "@/apis/paper.js";
import useLocalStore from "@/stores/local.js";
import {encrypt} from '@/utils/jsencrypt.js'


const localStore = useLocalStore();
const router = useRouter();
const columnsList = ref([]);
const paperList = ref([])
const userStore = useUserStore();
let selectCategory = ref(null)
const showChapterVideo = ref(false)
const selectColumnIndex = ref(0)
const calendarValue = ref(new Date())
const elTreeKey = ref(0)
const draw1 = ref(false)
const randomPaper = ref(null)

const activeComponentIndex = ref(0)
const components1 = ref([QuestionRecord, AnswerQuestion, StudentsSpecial, EvaluationReport, MyCollection, Membership])
const props = ref({
  // multiple: true,
  lazy: true,
  lazyLoad(node, resolve) {
    const { level } = node;
    // console.log(node, level)
    if (level == 0) {
      ListApis.industryList().then((res) => {
        if (res.code == 1 && res.data) {
          res.data.forEach((item) => {
            item.label = item.name;
            item.value = item.id;
            item.leaf = false;
          });
          resolve(res.data);
        } else {
          resolve([]);
        }
      });
    } else if (level == 1) {
      ListApis.examByIndustry({
        params: {
          size: 1000,
          industryId: node.value,
        },
      }).then((res) => {
        if (res.data) {
          res.data.forEach((item) => {
            item.label = item.name;
            item.value = item.id;
            item.leaf = false;
          });
          resolve(res.data);
        } else {
          resolve([]);
        }
      });
    } else if (level == 2) {
      ListApis.leafList({
        params: { examId: node.value, parentId: 0 },
      }).then((res) => {
        if (res.data) {
          res.data.forEach((item) => {
            item.label = item.name;
            item.value = item.id;
            item.leaf = item.hasChild ? false : true;
          });
          resolve(res.data);
        } else {
          resolve([]);
        }
      });
    } else {
      ListApis.leafList({
        params: { examId: node.data.examId, parentId: node.value },
      }).then((res) => {
        if (res.data) {
          res.data.forEach((item) => {
            item.label = item.name;
            item.value = item.id;
            item.leaf = item.hasChild ? false : true;
          });
          resolve(res.data);
        } else {
          resolve([]);
        }
      });
    }
  },
});
const freeTypes = ['全部', '免费', '购课'];
const selectFreeType = ref(0)
const liveList = ref([])
const calendar = ref(null)
const items1 = ref([{
  text: '做题记录',
  img: a_svg,
}, {
  text: '题库答疑',
  img: b_svg,
}, {
  text: '学员专享',
  img: c_svg,
}, {
  text: '评估报告',
  img: d_svg,
}, {
  text: '我的收藏',
  img: e_svg,
}, {
  text: '我的会员',
  img: f_png,
}])
const dialogVisible = ref(false)
const selectPaper = ref(null)
const paperDialog = ref(null)
const photoArray = ref([mine_three1, mine_three2, mine_three3, mine_three4, mine_three5, mine_three6, mine_three7])
const photoArray2 = ref([mine_three11, mine_three21, mine_three31, mine_three4, mine_three5, mine_three6, mine_three7])

// const items2 = ref([{
//   text: '章节练习',
//   img: mine_three1,
//   img1: mine_three11,
// }, {
//   text: '精选试题',
//   img: mine_three2,
//   img1: mine_three21,
// }, {
//   text: '模拟试题',
//   img: mine_three3,
//   img1: mine_three31,
// }, {
//   text: '历年真题',
//   img: mine_three4,
//   img1: mine_three4,
// }, {
//   text: '每日一练',
//   img: mine_three5,
//   img1: mine_three5,
// }, {
//   text: '考前点题',
//   img: mine_three6,
//   img1: mine_three6,
// }, {
//   text: '易错题',
//   img: mine_three7,
//   img1: mine_three7,
// }])
const selected1 = ref(0)
// 错题数量
const ecCount = ref(0)
const dcCount = ref(0)
const chapterDc = ref(0)
const chapterQCount = ref(0)
// 某个科目下的笔记,初始化与切换科目时获取
const noteNum = ref(0)
const categoryCollectRecordsObj = ref(null)
const drawWidth = ref(['40%', '40%', '40%', '80%', '60%', '40%']);
const randomPaperDetail=ref(null)
const isVip = computed(() => {
  return columnsList.value.length > 0
})

async function loadElTree(node, resolve, reject) {

  if (node.level != 0) {
    ListApis.childChapter({ params: { pid: node.data.id } }).then(async res => {

      const res1 = await QuestionApis.getChapterRecordsIds({
        params: {
          categoryId: selectCategory.value.at(-1),
          columnId: columnsList.value[selectColumnIndex.value].id,
          industryCode: selectCategory.value[0],
          recordsType: 'chapter',
          examId: selectCategory.value[1],
          chapterIds: res.data.map(e => e.id)
        }
      })

      resolve(res.data.map(e => {
        return {
          ...e,
          doCount: res1.data[e.id].dc,
          ...res1.data[e.id],
          doPercent: Number.parseInt(res1.data[e.id].dc / e.qcount * 100) + '%'
        }
      }))
    })
  } else {
    const res = await ListApis.chapterList({
      params: {
        categoryId: selectCategory.value.at(-1),
        columnId: columnsList.value[selectColumnIndex.value].id
      }
    })

    // QuestionApis.getChapterRecordsIds()   getChapterRecords
    if (res.data.length == 0) {
      return
    }
    chapterQCount.value = res.data.reduce((acc, cur) => {
      acc += cur.qcount
      return acc;
    }, 0)
    const res1 = await QuestionApis.getChapterRecordsIds({
      params: {
        industryCode: selectCategory.value[0],
        examId: selectCategory.value[1],
        categoryId: selectCategory.value.at(-1),
        recordsType: 'chapter',
        chapterIds: res.data.map(e => e.id)
      }
    })
    let num = 0
    for (let i in res1.data) {
      num += res1.data[i].dc
    }
    chapterDc.value = num
    resolve(res.data.map(e => {
      return {
        ...e,
        doCount: res1.data[e.id].dc,
        doPercent: Number.parseInt(res1.data[e.id].dc / e.qcount * 100) + '%'
      }
    }))
  }
}

function getNoteList() {
  NoteApis.getNoteNum({
    params: {
      categoryId: userStore.selectCategory.categoryId
    }
  }).then(res => {
    noteNum.value = res.data
  })

}

// 科目下做题数量与错题数量
function categoryCollectRecords() {
  QuestionApis.getCategoryCollectRecords({
    params: {
      industryCode: userStore.selectCategory.industryCode,
      examId: userStore.selectCategory.examId,
      categoryId: userStore.selectCategory.categoryId,
      app: false
    }
  }).then(res => {
    let num1 = 0
    let num2 = 0
    for (let i = 0; i < res.data.records.length; i++) {
      num1 += res.data.records[i].ec
      num2 += res.data.records[i].dc
    }
    ecCount.value = num1
    dcCount.value = num2
    categoryCollectRecordsObj.value = res.data
  })
}

function toggleSelectColumnIndex(index) {
  if (selectColumnIndex.value == index) return;
  selectColumnIndex.value = index
  elTreeKey.value++
}

function handleChange(val) {
  getColumnsByCategory({ categoryId: val.at(-1) })

  // 设置本地并请求
  HomeApis.settingChoose({
    categoryList: [{ categoryId: val.at(-1), ifCheck: true }],
  }).then((res) => {

    if (res.code == 1) {
      showChapterVideo.value = false
      userStore.setSelectCategory({
        examId: val[1],
        industryId: val[0],
        industryCode: val[0],
        categoryCode: val.at(-1),
        categoryId: val.at(-1),
      });
    }
    getNoteList()
  });
}


function getColumnsByCategory(data) {
  // 获取科目
  return MyResourceApis.myBuyAsset({
    params: { type: 'question', categoryIds: data.categoryId }
  }).then((res) => {
    if (res.data.length > 0) {
      columnsList.value = res.data[0].columnModels;
      selectColumnIndex.value = 0;
    }else{
      columnsList.value = [];
      selectColumnIndex.value = 0;
    }
  })

}

function goToPractice(data) {
  if (data.doCount) {
    ElMessageBox.confirm('是否继续练习', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '重新开始',
      showClose: true,
      type: 'warning',
      distinguishCancelAndClose: true,
    }).then(() => {
      router.push({
        path: `/questionBank/chapterPractice/practiceMode`, query: {
          categoryId: userStore.selectCategory.categoryId, columnId: columnsList.value[selectColumnIndex.value].id,
          chapterId: data.id,
          name: data.name,
          dc: data.dc,
          ec: data.ec,
          cc: data.cc,
        }
      })
    }).catch(_ => {

      if (_ == 'cancel') {
        router.push({
          path: `/questionBank/chapterPractice/practiceMode`, query: {
            categoryId: userStore.selectCategory.categoryId, columnId: columnsList.value[selectColumnIndex.value].id,
            chapterId: data.id,
            name: data.name,
            restart: true
          }
        })
      }

    })
  } else {
    router.push({
      path: '/questionBank/chapterPractice/practiceMode', query: {
        chapterId: data.id, columnId: columnsList.value[selectColumnIndex.value].id,
        name: data.name,
        dc: data.dc,
        ec: data.ec,
        tc: data.tc,
        cc: data.cc
      }
    })
  }

}

function goOtherPage(item, index,initial=false) {
  if (index == selectColumnIndex.value&&!initial) return;
  selectColumnIndex.value = index


  if (item.name == '每日一练') {
    router.push({
      path: '/questionBank/todayPractice', query: {
        categoryId: userStore.selectCategory.categoryId,
      }
    })
  } else if (columnsList.value[selectColumnIndex.value].type == "paperLibrary") {
    //   获取试卷列表
    getPaperList()
  } else if(columnsList.value[selectColumnIndex.value].type == "randomFormPaper"){


    
    // 随机组卷
    PaperApis.generateRandomRecords(encrypt(JSON.stringify({
      columnId: columnsList.value[index].id,
      categoryId: userStore.selectCategory.categoryId
    })), {
      headers: {
        'encryption-type': 'rsa',
        'content-type': 'application/json; charset=UTF-8'
      }
    }).then(res => {
      nextTick(() => {
        randomPaperDetail.value=res.data
        randomPaper.value.setDetail(res.data)
        localStore.setRandomQuestion(res.data)
      })
    })
  }
}

function goNote() {
  router.push({
    path: '/questionBank/note/index', query: {
      categoryId: userStore.selectCategory.categoryId,
    }
  })
}

function toggleIndex(index) {

  activeComponentIndex.value = index
  draw1.value = true
  if (index == 0) {

  }
}
function getPaperList() {
  PaperApis.paperByColumnId({
    params: {
      countDetail: true,
      columnIds: [columnsList.value[selectColumnIndex.value].id],
      current: 1,
      size: 1000,
    }
  }).then(res => {
    paperList.value = res.data.records
  })
}
function buyVip() {
  router.push({
    path: "/buyCenter/index"
  })
}
async function init() {
  getNoteList()
  categoryCollectRecords()
  if (userStore.selectCategory) {
    selectCategory.value = [
      userStore.selectCategory.industryCode,
      userStore.selectCategory.examId,
      userStore.selectCategory.categoryId,
    ];
  } else {
    const res = await HomeApis.currentChoose()
    selectCategory.value = [
      res.data.industryCode,
      res.data.examId,
      res.data.categoryId,
    ];
  }
  //   获取栏目
  await getColumnsByCategory({ categoryId: selectCategory.value.at(-1) })
 
  if(columnsList.value.length){
 // columnsList,selectColumnIndex
    // 获取试题或者随机练习
    goOtherPage(columnsList.value[selectColumnIndex.value],selectColumnIndex.value,true)
  }
  
   
  
}
function goToPaper(item) {
  dialogVisible.value = true
  selectPaper.value = item
}
function paperDialogOpened() {
  //   获取试卷详情
  paperDialog.value.setLoading(true)
  PaperApis.detail({
    params: {
      id: selectPaper.value.id
    }
  }).then(res => {
    paperDialog.value.setDetail(res.data)
  }).finally(() => {
    paperDialog.value.setLoading(false)
  })
}
function goPracticeMode() {
  router.push({
    path: '/questionBank/paper/PracticeMode',
    query: {
      id: selectPaper.value.id,
      columnId: columnsList.value[selectColumnIndex.value].id,
      name: selectPaper.value.name,
      industryCode: userStore.selectCategory.industryCode,

      examId: userStore.selectCategory.examId,
      categoryId: userStore.selectCategory.categoryId,
    }
  })
}
function goExamMode() {
  // 是否处于在考状态
  if (selectPaper.value.recordId) {
    return ElMessageBox.confirm('您已参加过考试，是否继续之前的考试？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '重新考试',
      type: 'warning',
      showClose: false
    }).then(() => {
      router.push({
        path: '/questionBank/paper/ExamMode',
        query: {
          id: selectPaper.value.id,
          columnId: columnsList.value[selectColumnIndex.value].id,
          name: selectPaper.value.name,
          industryCode: userStore.selectCategory.industryCode,

          examId: userStore.selectCategory.examId,
          categoryId: userStore.selectCategory.categoryId,


          recordId: selectPaper.value.recordId,
          examTime: selectPaper.value.examTime,
          qcount: selectPaper.value.qcount,
        }
      })
    }).catch(_ => {
      // cancel

      router.push({
        path: '/questionBank/paper/ExamMode',
        query: {
          id: selectPaper.value.id,
          columnId: columnsList.value[selectColumnIndex.value].id,
          name: selectPaper.value.name,
          industryCode: userStore.selectCategory.industryCode,

          examId: userStore.selectCategory.examId,
          categoryId: userStore.selectCategory.categoryId,
        }
      })
    })
  }
  router.push({
    path: '/questionBank/paper/ExamMode',
    query: {
      id: selectPaper.value.id,
      columnId: columnsList.value[selectColumnIndex.value].id,
      name: selectPaper.value.name,
      industryCode: userStore.selectCategory.industryCode,

      examId: userStore.selectCategory.examId,
      categoryId: userStore.selectCategory.categoryId,
    }
  })
}
function downloadPaper(item) {
  PaperApis.exportPaper({
    params: {
      paperRecordsId: '',
      paperId: item.id
    }
  }).then(res => {
    var htmlAnchorElement = document.createElement('a');
    htmlAnchorElement.href = res.data
    const str = res.data.split('/')[res.data.split('/').length - 1]
    htmlAnchorElement.download = str.substring(0, str.indexOf('?'))
    document.body.appendChild(htmlAnchorElement)
    htmlAnchorElement.click()
    htmlAnchorElement.remove()
  })
}
function goToRandomPaper() {
  if (randomPaperDetail.value.qcount > 0) {
    router.push({
      path: '/questionBank/paper/RandomMode',
      query: {
        id: randomPaperDetail.value.id,
        name: randomPaperDetail.value.name,

        industryCode: userStore.selectCategory.industryCode,
        examId: userStore.selectCategory.examId,
        categoryId: userStore.selectCategory.categoryId,
        columnId: columnsList.value[selectColumnIndex.value].id,

        type: randomPaperDetail.value.type,
        recordsType: randomPaperDetail.value.recordsType,
        qcount: randomPaperDetail.value.qcount,
        allScore: randomPaperDetail.value.allScore,
        paperId: randomPaperDetail.value.paperId,
        passScore: randomPaperDetail.value.passScore,
      }
    })
  } else {
    ElMessage({
      message: '题目数量为0，无法组卷',
      type: 'warning'
    })
  }
}

init()
</script>


<template>
  <div class="my-bank-container">
    <div class="my-bank-container-top-header">
      <div class="my-bank-container-top-header-left">
        <el-cascader class="MyCourse-cascader" v-model="selectCategory" filterable :props="props"
          :show-all-levels="false" @change="handleChange" />
      </div>
      <el-scrollbar class="my-el-scrollbar1">
        <div class="my-bank-container-top-header-right">
          <!--          <div v-for="item,index in columnsList" :key="index" class="my-bank-container-top-header-right-item"-->
          <!--               :class="{ active: selectColumnIndex==index }" @click="toggleSelectColumnIndex(index)">-->
          <!--            {{ item.name }}-->
          <!--          </div>-->
        </div>
      </el-scrollbar>

      <div>

      </div>
    </div>
    <div class="my-bank-container-two">
      <div class="one">
        <div v-for="(item, index) in items1" :key="index" class="one-item" @click="toggleIndex(index)"
          :class="{ active: activeComponentIndex == index }">
          <img :src="item.img" alt="" class="one-item-img" />
          <span>{{ item.text }}</span>
        </div>
      </div>
      <div class="two">
        <span class="num">{{ ecCount }}</span>
        <span class="text">错题数</span>
      </div>
      <div class="two note" @click="goNote">
        <span class="num">{{ noteNum }}</span>
        <span class="text">题库笔记</span>
      </div>
      <div class="four">
        <span class="text" v-if="!isVip">
          您还不是会员
        </span>
        <span class="text" v-else>
          您已是会员
        </span>
        <img src="@/assets/images/mine2.png" class="mine2">
        <div>
          <div class="goToBuy" v-if="!isVip">
            <span @click="buyVip">
              开通题库会员
            </span>
          </div>
        </div>
      </div>
    </div>
    <div class="my-bank-container-three">
      <div class="my-bank-container-three-title">
        <div class="icon"></div>
        <span>题库练习</span>
      </div>
      <div class="one">
        <div>
          <div class="section1">
            <div class="icons-container">
              <div v-for="(item, index) in columnsList" :key="index" class="section1-item"
                @click="goOtherPage(item, index)">
                <img v-if="selectColumnIndex == index" :src="photoArray2[index]" class="section1-img">
                <img v-else :src="photoArray[index]" class="section1-img">
                <span>
                  {{ item.name }}
                </span>
              </div>
            </div>
            <div class="notice">
              <img src="@/assets/images/Bell_duotone_line.png" class="notice-img">
              <span>
                新版教材已上市，我们正在更新、增减章节练习，预计9月2日左右更新完毕，此阶段将给您的部分做题记录带来影响，敬请谅解。
              </span>
            </div>
          </div>
        </div>
        <div class="section2"
          v-if="columnsList[selectColumnIndex] && columnsList[selectColumnIndex].type == 'chapterPractice'">
          <div class="a">
            <div class="aa">
              <span :class="{ active: selected1 == 0 }" @click="selected1 = 0">章节练习</span>
              <span :class="{ active: selected1 == 1 }" @click="selected1 = 1">章节真题</span>
              <span>注：正确率是 <span class="tips2">已做正确</span> ÷ <span class="tips2">已做总数</span></span>
            </div>
            <div class="ab">
              <span>已做:</span>
              <span>{{ chapterDc }}</span>
              <el-progress class="my-progress" :show-text="false" :stroke-width="13"
                :percentage="parseInt((chapterDc) * 100 / chapterQCount)" />
            </div>
            <div class="ac">
              <!--              <span>可免费做：</span><span>0</span>-->
            </div>
            <div class="ad">
            </div>
          </div>
          <el-scrollbar class="el-tree-container">
            <el-tree :key="elTreeKey" :icon="RightIcon" lazy :load="loadElTree"
              :props="{ label: 'name', isLeaf: 'leaf' }">
              <template #default="{ node, data }">
                <div class="tree-content">
                  <div class="chapterWrap">
                    <span>{{ data.name }}</span>
                  </div>
                  <div class="chapter-2">
                    <span>正确率:</span>
                    <span>{{ data.dc ? parseInt((data.dc - data.ec) * 100 / data.dc) : 0 }}%</span>
                  </div>
                  <div class="chapter-3">
                    <span>已做/总做：</span>
                    <span>{{ data.doCount }}/{{ data.qcount }}</span>
                  </div>
                  <div class="chapter-4">
                    <!--                    <el-button class="btn-solid" v-if="data.leaf" @click="goTopic(data)" round>考点试做</el-button>-->
                    <el-button class="btn-solid" type="primary" round v-if="data.leaf" @click="goToPractice(data)">做题
                    </el-button>
                  </div>
                </div>
              </template>
            </el-tree>
          </el-scrollbar>
        </div>
        <div class="section2"
          v-else-if="columnsList[selectColumnIndex] && columnsList[selectColumnIndex].type == 'paperLibrary'">
          <el-scrollbar height="600">
            <div>
              <div class="is-paper">
                <div class="paper-container" v-if="paperList.length">
                  <div v-for="(item9, index9) in paperList" :key="index9" class="paper-container-item">
                    <div class="paper-container-item-left">
                      <div class="one">
                        <div class="one-left">
                          <img v-if="item9.free" src="@/assets/images/free_icon.jpg">
                          <span class="paperName">
                            {{ item9.name }}
                          </span>
                        </div>
                        <div class="one-right">
                          <span>
                            {{ item9.qcount }}题
                          </span>
                          <el-divider direction="vertical" />
                          <span>
                            {{ item9.stuCount || 0 }}人做过
                          </span>

                        </div>
                      </div>
                      <div class="two">
                        <span>考试时间：{{ item9.examTime }}分钟</span>
                      </div>
                    </div>
                    <div class="paper-container-item-right">
                      <el-button type="primary" @click="goToPaper(item9)">做题</el-button>
                      <el-button type="primary" @click="downloadPaper(item9)">下载</el-button>
                    </div>
                  </div>
                </div>
                <div class="paper-container" v-else>
                  <img src="@/assets/images/empty2.png">
                </div>
              </div>
            </div>
          </el-scrollbar>
        </div>
        <!-- 如果是随机小测呢？ -->
        <div class="section2"
          v-else-if="columnsList[selectColumnIndex] && columnsList[selectColumnIndex].type == 'randomFormPaper'">
          <CommonModeSelect ref="randomPaper" only-exam-mode records-type="paperRecordRandomFormPaper" />
          <div class="is-random-btns" >
                <el-button type="primary" @click="goToRandomPaper">开始练习</el-button>
              </div>
        </div>
      </div>
    </div>


    <el-drawer v-model="draw1" direction="rtl" :size="drawWidth[activeComponentIndex]" destroy-on-close>
      <component :is="components1[activeComponentIndex]" :categoryCollectRecordsObj="categoryCollectRecordsObj"
        :columnId="columnsList[selectColumnIndex] && columnsList[selectColumnIndex].id" />
    </el-drawer>
    <el-dialog v-model="dialogVisible" title="Tips" width="1200" @opened="paperDialogOpened">
      <div class="paper-mode-container">
        <CommonModeSelect ref="paperDialog" />
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="goPracticeMode">练习模式</el-button>
          <el-button type="primary" @click="goExamMode">考试模式</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped>
.paper-container>img {
  max-width: 800px;
}

.my-bank-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.my-bank-container-top-header {
  background: #f8fbff;
  height: 50px;
  display: flex;
  align-items: center;
  padding: 0 22px;
}

.my-el-scrollbar1 {
  width: 830px;
}

.my-bank-container-top-header-right {
  display: flex;
  flex-direction: row;
  gap: 31px;
}

.my-bank-container-top-header-right-item {

  padding: 0 16px;
  line-height: 50px;
  cursor: pointer;
  max-width: 120px;
  box-sizing: border-box;
  height: 50px;
  flex-shrink: 0;
}

.my-bank-container-top-header-right-item.active {
  color: #ffffff;
  background: #409eff;
}

.my-bank-container-two {
  flex: 1;
  display: flex;
  gap: 13px;
}

.my-bank-container-two .one {
  background: white;
  border-radius: 12px;
  display: grid;
  width: 420px;
  height: 218px;
  padding: 28px 17px;

  gap: 26px 77px;
  box-sizing: border-box;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
}

.one-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
}

.one-item.active {
  color: #3C6CFF;
}

.one-item-img {
  width: 47px;
  height: 47px;
}

.my-bank-container-two .two {
  border-radius: 12px;
  background: white;
  box-sizing: border-box;
  display: flex;
  width: 174px;
  height: 218px;
  padding: 12px 0px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 30px;
  flex-shrink: 0;
}

.my-bank-container-two .two.note {
  cursor: pointer;
}

.my-bank-container-two .two .num {
  color: #000;
  text-align: center;
  font-size: 40px;
  font-weight: 400;
}

.my-bank-container-two .two .text {
  color: #000;
  text-align: center;
  font-size: 14px;
  font-weight: 400;
}

.my-bank-container-two .four {
  width: 371px;
  height: 217px;
  background-image: url("@/assets/images/mine1.png");
  padding: 3px 16px 16px;
  box-sizing: border-box;
  position: relative;
}

.my-bank-container-two .four .text {
  color: #C0C0C0;
  font-size: 12px;
  font-weight: 400;
}

.goToBuy {
  margin-top: 72px;
  display: inline-flex;
  padding: 10px 27px;
  justify-content: center;
  align-items: center;
  border-radius: 31px;
  background: linear-gradient(267deg, #FFEC93 -22.38%, #FFB668 145.53%);
  cursor: pointer;
}

.mine2 {
  width: 194px;
  height: 194px;
  float: right;
  position: absolute;
  top: -20px;
  right: 0;
}

.my-bank-container-three-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.my-bank-container-three-title .icon {
  width: 4px;
  height: 20px;
  flex-shrink: 0;
  background: #3C6CFF;
}

.my-bank-container-three-title span {
  color: #222;
  font-size: 18px;
  font-weight: 700;
}

.my-bank-container-three .one {
  margin-top: 20px;

}

.section1 {
  background: #FAFAFA;
}

.icons-container {
  display: flex;
  align-items: center;
  gap: 77px;
}

.section1-item {
  display: flex;
  width: 100px;
  height: 86px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  cursor: pointer;
}

.section1-img {
  width: 40px;
  height: 40px;
}

.section1-item span {
  color: #000;
  text-align: center;
  font-size: 12px;
  font-weight: 400;
}

.section1 .notice {
  display: flex;
  padding: 15px 10px 15px 22px;
  align-items: center;
  gap: 12px;
  align-self: stretch;
  border-radius: 4px;
  background: #FBFBFB;
}

.notice-img {
  width: 24px;
  height: 24px;
}

.section1 .notice span {
  color: rgba(60, 108, 255, 0.50);
  font-size: 14px;
  font-weight: 400;
}

.section2 {
  background: white;

}

.section2 .a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 28px 0;
  height: 32px;
  gap: 20px;
}

.aa {
  width: 480px;
  display: flex;
  gap: 40px;
  align-items: center;
  padding-left: 40px;
}

.aa span {
  cursor: pointer;
}

.aa span.active {
  color: #409EFF;
}

.ab {
  width: 120px;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
}

.my-progress {
  width: 49px;
}

.ac {
  width: 150px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.ad {
  width: 250px;
}

.my-bank-container ::v-deep(.el-tree-node__content) {
  min-height: 40px;
  line-height: 40px;
}

.el-tree-container {
  padding-left: 16px;
  height: 400px;
}

.tree-content {
  display: flex;
  gap: 20px;
  align-items: center;
  width: 100%;
}

.chapterWrap {
  width: 380px;
}

.chapter-2 {
  width: 120px;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
}

.chapter-3 {
  width: 150px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.chapter-4 {
  width: 250px;
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: center;
}

.btn-solid {
  --el-color-primary: #3C6CFF;
}

.tips2 {
  color: #3C6CFF;
}

.paper-container {
  background: white;
  border-radius: 12px;
  display: flex;
  gap: 16px;
  flex-direction: column;
}

.paperName {
  font-size: 18px;
  font-weight: bolder;
  color: transparent;
  background-image: linear-gradient(180deg, #FFA500 35%, #FFD700 50%, #FFA500 65%);
  background-clip: text;
  animation: blink 2.5s infinite linear;

  text-shadow: 0 0 4px #FFD700;
}

.paper-container-item {
  border-bottom: 3px solid #FAFAFA;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.paper-container-item .one {
  display: flex;
  gap: 40px;
  align-items: center;
  width: 800px;
  justify-content: space-between;
}

.paper-container-item .one .one-left {
  display: flex;
  gap: 10px;
  align-items: center;
}

.paper-container-item .one .one-left img {
  width: 32px;
}

.one-right {
  width: 200px;
}
.is-random-btns {
  text-align: right;
  padding: 16px;
}
</style>